<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0; margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.scrollImg{
			width: 810px;
			height: 320px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.scrollImg ul {
			width: 4050px;
			list-style: none;
			position: absolute;
			left: 0; top: 0;
		}
		.scrollImg ul li {
			width: 810px; height: 320px;
			float: left;
			font-size: 50px;
		}
	</style>
	<script src="js/move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		onload =function(){
			var oUL = document.getElementsByTagName("ul")[0];
			
			var index = 1;
			setInterval(function(){
				// index == 4
				animate(oUL, {left: -810*index}, {callback:function(){
					//callback称为回调函数, 指的是一种使用函数的方式
					//以下代码，必须放在回调中，确保运动结束后再执行。
					console.log(index)
					if(index == 4) {
						index = 0;					
						oUL.style.left = 0;
					}
					index++;
				}});
			},200);
			
		}
	</script>	
	<body>
		<div class="scrollImg">
			<ul>
				<li style="background: red;">A</li>
				<li style="background: blue;">B</li>
				<li style="background: yellow;">C</li>
				<li style="background: gray;">D</li>
				<li style="background: red;">A</li>
			</ul>
		</div>
		
	</body>
</html>
